let product_v = new Vue({
    el:".grid",
    data:{
        arr:[]
    },
    created:function () {
        //获取地址栏中的参数 检查是否包含cid,包含代表请求的是某个分类下的作品
        if (location.search.indexOf("cid")!=-1){//请求分类下的作品
            //得到请求的分类id
            let cid = location.search.split("=")[1];
            //请求某个分类下的作品
            axios.get("/product/selectByCid?cid="+cid).then(function (response) {
                product_v.arr = response.data;
            })
        }else if(location.search.indexOf("wd")!=-1) {//包含代表是点击了搜索
            //得到搜索关键字
            let wd = location.search.split("=")[1];
            //发出搜索商品的请求
            axios.get("/product/search?wd="+wd).then(function(response){
                product_v.arr = response.data;
            })
        }else {//请求所有作品
                axios.get("/product/select/home").then(function (response) {
                    product_v.arr = response.data;
                })
        }

    },//当Vue管理的变量发生改变时updated方法会触发
    updated:function () {
        //当arr数组得到请求回来的数据的时候 执行初始化瀑布流相关操作
        $(".grid").imagesLoaded().progress(function () {
            $(".grid").masonry({
                itemSelector:".grid-item",
                columnWidth:210
            })

            //给瀑布流中的元素添加鼠标移入移出事件
            $(".grid-item").hover(function () {//鼠标移入时执行的方法
                //$(this)得到触发事件的元素div
                //.children("div") 获取div类型的子元素(蓝条)
                $(this).children("div").fadeIn(500);
            },function () {//鼠标移出时执行的方法
                $(this).children("div").fadeOut(500);
            });
        })
    }
})